<template>
  <view v-if="visible" class="modal-overlay" @tap="handleOverlayTap">
    <view class="modal-container" @tap.stop>
      <view class="modal-header">
        <text class="modal-title">{{ title }}</text>
        <view class="modal-close" @tap="handleClose">
          <text class="close-icon">×</text>
        </view>
      </view>
      
      <view class="modal-body">
        <view class="input-container">
          <input 
            v-model="inviteCode"
            class="invite-input"
            :placeholder="placeholder"
            :maxlength="6"
            type="text"
            @input="handleInput"
            @confirm="handleConfirm"
            :focus="autoFocus"
          />
        </view>
        
        <view class="error-message" v-if="errorMessage">
          <text class="error-text">{{ errorMessage }}</text>
        </view>
      </view>
      
      <view class="modal-footer">
        <view class="btn-container">
          <view class="btn btn-cancel" @tap="handleCancel">
            <text class="btn-text">{{ cancelText }}</text>
          </view>
          <view class="btn btn-confirm" @tap="handleConfirm" :class="{ 'disabled': !canConfirm }">
            <text class="btn-text">{{ confirmText }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'InviteCodeModal',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '邀请码验证'
    },
    placeholder: {
      type: String,
      default: '请输入6位邀请码'
    },
    cancelText: {
      type: String,
      default: '取消'
    },
    confirmText: {
      type: String,
      default: '确定'
    },
    autoFocus: {
      type: Boolean,
      default: true
    }
  },
  data: function() {
    return {
      inviteCode: '',
      errorMessage: ''
    }
  },
  computed: {
    canConfirm: function() {
      return this.inviteCode.trim().length > 0
    }
  },
  watch: {
    visible: function(newVal) {
      if (newVal) {
        this.inviteCode = ''
        this.errorMessage = ''
      }
    }
  },
  methods: {
    handleInput: function(e) {
      this.inviteCode = e.detail.value
      this.errorMessage = ''
    },
    
    handleConfirm: function() {
      if (!this.canConfirm) {
        this.errorMessage = '请输入邀请码'
        return
      }
      
      this.$emit('confirm', this.inviteCode.trim())
    },
    
    handleCancel: function() {
      this.$emit('cancel')
    },
    
    handleClose: function() {
      this.$emit('cancel')
    },
    
    handleOverlayTap: function() {
      // 点击遮罩层不关闭弹窗，防止误操作
    },
    
    showError: function(message) {
      this.errorMessage = message
    },
    
    clearError: function() {
      this.errorMessage = ''
    }
  }
}
</script>

<style scoped>
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.modal-container {
  width: 320px;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

.modal-header {
  position: relative;
  padding: 24px 24px 16px;
  border-bottom: 1px solid #f0f0f0;
}

.modal-title {
  font-size: 18px;
  font-weight: 600;
  color: #333333;
  text-align: center;
  display: block;
}

.modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #f5f5f5;
}

.close-icon {
  font-size: 20px;
  color: #999999;
  line-height: 1;
}

.modal-body {
  padding: 24px;
}

.input-container {
  position: relative;
  margin-bottom: 16px;
}

.invite-input {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  font-size: 16px;
  color: #333333;
  background-color: #f8f9fa;
  border: 2px solid #e9ecef;
  border-radius: 12px;
  box-sizing: border-box;
}

.invite-input:focus {
  background-color: #ffffff;
  border-color: #007AFF;
  outline: none;
}

.error-message {
  margin-top: 8px;
  min-height: 20px;
}

.error-text {
  font-size: 14px;
  color: #ff3b30;
  line-height: 20px;
}

.modal-footer {
  padding: 16px 24px 24px;
}

.btn-container {
  display: flex;
  gap: 12px;
}

.btn {
  flex: 1;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-cancel {
  background-color: #f8f9fa;
  border: 1px solid #e9ecef;
}

.btn-cancel:active {
  background-color: #e9ecef;
}

.btn-confirm {
  background-color: #007AFF;
  border: 1px solid #007AFF;
}

.btn-confirm:active {
  background-color: #0056b3;
}

.btn-confirm.disabled {
  background-color: #e9ecef;
  border-color: #e9ecef;
}

.btn-text {
  font-size: 16px;
  font-weight: 500;
}

.btn-cancel .btn-text {
  color: #666666;
}

.btn-confirm .btn-text {
  color: #ffffff;
}

.btn-confirm.disabled .btn-text {
  color: #999999;
}

/* 响应式设计 */
@media (max-width: 375px) {
  .modal-container {
    width: 280px;
    margin: 0 20px;
  }
  
  .modal-header {
    padding: 20px 20px 12px;
  }
  
  .modal-body {
    padding: 20px;
  }
  
  .modal-footer {
    padding: 12px 20px 20px;
  }
}
</style>